<template>
  <div class="my-bar" v-loading="loading">
    <div class="my-bar__time">
      <el-date-picker v-model="search.startDate" type="date" placeholder="开始日期" @change="onChange"
        :disabled-date="disabledDate1" />
      <el-date-picker v-model="search.endDate" type="date" placeholder="结束日期" @change="onChange"
        :disabled-date="disabledDate2" />
    </div>
    <div class="my-bar__box" id="main2"></div>
  </div>
</template>
<script setup lang='ts'>
import { ref, reactive, watch, onBeforeUnmount } from 'vue'
import { dayListApi } from '@/views/workbench/api/workbenchApi'
import { useRoute } from 'vue-router'
import { getUserInfo } from '@/global/session'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'
import { FunTime } from '@/global/methods'
const route = useRoute()
const townId = route.query.townId as string
let userInfo = reactive({ roleId: '', townId: '', countryId: '', roleAuth: '' })
userInfo = JSON.parse(getUserInfo() as string)
const search = reactive({
  startDate: new Date((new Date().getTime() - 24 * 60 * 60 * 1000 * 32)),
  endDate: new Date((new Date().getTime() - 24 * 60 * 60 * 1000))
})
const loading = ref<boolean>(false)
interface PropsDialog {
  resize: boolean;//浏览器是否变化
}
const props = withDefaults(defineProps<PropsDialog>(), {
  resize: false,
});

const onList = async () => {
  try {
    let params = {
      townId: townId,
      startDate: FunTime(search.startDate),
      endDate: FunTime(search.endDate)
    }
    let res = await dayListApi(params)
    if (res?.code === 0) {
      let [arr1, arr2] = [<any>[], <any>[]]
      res.data.forEach(v => {
        let timeArr = v.date.split('-')
        let time = parseInt(timeArr[1]) + '-' + parseInt(timeArr[2])
        arr1.push(time)
        arr2.push(v.intoNum)
      });
      echartsFun(arr1, arr2)
    } else {
      loading.value = false
    }
  } catch {
    loading.value = false
  }
}
//如果是乡镇账号 判断一下 是不是当前乡镇
if (userInfo.roleId == '4' || userInfo.roleId == '5') {
  if (userInfo.townId === townId) {
    loading.value = true
    onList()
  }
} else {
  loading.value = true
  onList()
}
// 入户进度图 绘制图表
const echartsFun = (arr1, arr2) => {
  let myChart = echarts.init(document.getElementById('main2') as unknown as HTMLDivElement)
  let optionMap = {
    grid: {
      left: '60px',
      top: '10px',
      bottom: '30px',
      right: '20px'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      minInterval: 1,
      axisLine: { // 坐标轴轴线
        lineStyle: {
          color: '#e0e6f1'
        }
      },
      axisTick: { // 刻度线
        show: false
      },
      axisLabel: { // 坐标轴刻度标签文字颜色
        color: '#333'
      },
      data: arr1
    },
    yAxis: {
      minInterval: 1,
      min: 0,
      max: function (value) {
        if (value.max < 5) {
          return 5
        }
      }, // 左侧y轴最大值
      axisLabel: { // 坐标轴刻度标签
        color: '#333'
      },
      type: 'value'
    },
    tooltip: {
      trigger: 'axis'
    },
    series: [
      {
        data: arr2,
        type: 'line',
        // smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        lineStyle: {
          color: '#3E80DA',
        },
        areaStyle: { // 面积
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#3e80da' // 0% 处的颜色
            }, {
              offset: 1, color: '#eaf0fa' // 100% 处的颜色
            }]
          }
        }
      }
    ]
  };
  myChart.setOption(optionMap);
  loading.value = false
}

//浏览器是否变化
watch(
  () => props.resize,
  () => {
    let myChart = echarts.init(document.getElementById('main2') as unknown as HTMLDivElement)
    myChart.resize()
  }
)
// 开始时间禁用
const disabledDate1 = (time: Date) => {
  if (search.endDate) {
    return time.getTime() > search.endDate.getTime() || time.getTime() > Date.now() - 24 * 60 * 60 * 1000 || time.getTime() < search.endDate.getTime() - 24 * 60 * 60 * 1000 * 31
  } else {
    return time.getTime() > Date.now() - 24 * 60 * 60 * 1000
  }
}
// 结束时间禁用
const disabledDate2 = (time: Date) => {
  if (search.startDate) {
    return time.getTime() < search.startDate.getTime() || time.getTime() > Date.now() - 24 * 60 * 60 * 1000 || time.getTime() > search.startDate.getTime() + 24 * 60 * 60 * 1000 * 31
  } else {
    return time.getTime() > Date.now() - 24 * 60 * 60 * 1000
  }
}
// 时间变化
const onChange = () => {
  if (search.startDate && search.endDate) {
    onList()
  } else if (!search.startDate && search.endDate) {
    echartsFun([], [])
    ElMessage({ type: 'info', message: `请选择开始时间` })
  } else if (search.startDate && !search.endDate) {
    echartsFun([], [])
    ElMessage({ type: 'info', message: `请选择结束时间` })
  } else {
    echartsFun([], [])
    ElMessage({ type: 'info', message: `请选择开始和结束时间` })
  }
}
//注销之前
onBeforeUnmount(() => {
  let myChart = echarts.init(document.getElementById('main2') as unknown as HTMLDivElement)
  myChart.dispose()
})
</script>
<style scoped lang='scss'>
.my-bar {
  width: 100%;
  height: 100%;

  &__time {
    margin-top: 10px;
    text-align: center;
  }

  &__box {
    width: 100%;
    height: calc(100% - 40px);
  }
}
</style>